<!DOCTYPE html>
<html>
<head>
    <title>Windows带宽监控</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .header { text-align: center; margin-bottom: 20px; }
        .stats-container { display: flex; justify-content: space-around; margin-bottom: 20px; }
        .stat-card { background: #f0f0f0; padding: 15px; border-radius: 5px; text-align: center; min-width: 200px; }
        .stat-value { font-size: 24px; font-weight: bold; }
        .chart-container { position: relative; height: 400px; margin-bottom: 20px; }
        .controls { margin-bottom: 20px; text-align: center; }
        button { background: #4CAF50; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; }
        button:hover { background: #45a049; }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>Windows带宽监控工具</h1>
        <p>实时监控网络接口流量</p>
    </div>

    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-title">当前入站流量</div>
            <div class="stat-value" id="current-in">0 B/s</div>
        </div>
        <div class="stat-card">
            <div class="stat-title">当前出站流量</div>
            <div class="stat-value" id="current-out">0 B/s</div>
        </div>
        <div class="stat-card">
            <div class="stat-title">总入站流量</div>
            <div class="stat-value" id="total-in">0 MB</div>
        </div>
        <div class="stat-card">
            <div class="stat-title">总出站流量</div>
            <div class="stat-value" id="total-out">0 MB</div>
        </div>
    </div>

    <div class="controls">
        <button onclick="downloadReport()">下载报表</button>
        <button onclick="changeView('minute')">最近1分钟</button>
        <button onclick="changeView('hour')">最近1小时</button>
        <button onclick="changeView('day')">最近24小时</button>
    </div>

    <div class="chart-container">
        <canvas id="trafficChart"></canvas>
    </div>

    <div id="report"></div>
</div>

<script>
    // 创建图表
    const ctx = document.getElementById('trafficChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: '入站流量 (KB/s)',
                    data: [],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: '出站流量 (KB/s)',
                    data: [],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    fill: true,
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '流量 (KB/秒)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '时间'
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '网络流量监控'
                }
            }
        }
    });

    // 格式化字节大小为易读格式
    function formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 B';

        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];

        const i = Math.floor(Math.log(bytes) / Math.log(k));

        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    // 格式化字节/秒为易读格式
    function formatBytesPerSec(bytes, decimals = 2) {
        return formatBytes(bytes, decimals) + '/s';
    }

    // 更新图表数据
    function updateChart() {
        fetch('/traffic-data')
            .then(response => response.json())
            .then(data => {
                // 转换数据为KB/s
                const incomingKB = data.incoming.map(value => (value / 1024).toFixed(2));
                const outgoingKB = data.outgoing.map(value => (value / 1024).toFixed(2));

                chart.data.labels = data.timestamps;
                chart.data.datasets[0].data = incomingKB;
                chart.data.datasets[1].data = outgoingKB;
                chart.update();

                // 更新当前流量显示
                if (incomingKB.length > 0) {
                    const currentIn = incomingKB[incomingKB.length - 1];
                    document.getElementById('current-in').textContent = formatBytesPerSec(currentIn * 1024);
                }

                if (outgoingKB.length > 0) {
                    const currentOut = outgoingKB[outgoingKB.length - 1];
                    document.getElementById('current-out').textContent = formatBytesPerSec(currentOut * 1024);
                }
            });
    }

    // 更新总流量统计
    function updateTotalStats() {
        fetch('/total-traffic')
            .then(response => response.json())
            .then(data => {
                document.getElementById('total-in').textContent = formatBytes(data.total_incoming);
                document.getElementById('total-out').textContent = formatBytes(data.total_outgoing);
            });
    }

    // 更新报告
    function updateReport() {
        fetch('/report')
            .then(response => response.text())
            .then(data => {
                document.getElementById('report').innerHTML = data;
            });
    }

    // 下载报表
    function downloadReport() {
        fetch('/download-report')
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = 'bandwidth_report.json';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            });
    }

    // 切换视图
    function changeView(range) {
        fetch('/change-view?range=' + range)
            .then(response => response.json())
            .then(data => {
                // 重新加载页面数据
                updateChart();
                updateReport();
            });
    }

    // 初始加载
    updateChart();
    updateTotalStats();
    updateReport();

    // 定时更新
    setInterval(updateChart, 1000);
    setInterval(updateTotalStats, 5000);
    setInterval(updateReport, 10000);
</script>
</body>
</html>